<template>
  <a-modal
    v-model:open="visible"
    title="选择图标"
    @ok="handleOk"
    class="addStation"
    destroyOnClose
    :width="920"
    @cancel="cancel"
    centered
  >
    <ul class="iconUl">
      <li class="icon-item" v-for="icon in iconNames" :key="icon">
        <span
          :class="['demo-svg-icon', choosedIcon === icon ? 'active' : '']"
          @click="chooseIcon(icon)"
        >
          <component class="icon" :is="icon" :size="30" />
          <p>{{ icon }}</p>
        </span>
      </li>
    </ul>
    <template #footer>
      <div class="footerBar">
        <a-button key="back" @click="cancel">取消</a-button>
        <a-button key="submit" type="primary" @click="handleChoseIcon"
          >确认</a-button
        >
      </div>
    </template>
  </a-modal>
</template>
<script setup>
import { iconNames } from "@/config/iconNames";
const props = defineProps({
  iconChoseVisible: {
    type: Boolean,
    default: false,
  },
  defaultIcon: {
    type: String,
    default: "",
  },
});
const visible = ref(props.iconChoseVisible);
const choosedIcon = ref("");
const emits = defineEmits(["update:iconChoseVisible", "getChoosedIcon"]);
watch(
  () => props.iconChoseVisible,
  (val) => {
    visible.value = val;
    choosedIcon.value = props.defaultIcon;
  }
);
const cancel = () => {
  emits("update:iconChoseVisible", false);
  choosedIcon.value = "";
};
const chooseIcon = (icon) => {
  choosedIcon.value = icon;
};
const handleChoseIcon = () => {
  emits("getChoosedIcon", choosedIcon.value);
  cancel();
};
</script>

<style scoped lang="less">
.icon {
  font-size: 30px;
}
.iconUl {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 500px;
  list-style: none;
  padding: 0 !important;
  border-radius: 4px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  .icon-item {
    text-align: center;
    color: var(--el-text-color-regular);
    height: 90px;
    font-size: 13px;
    border-right: 1px solid var(--el-border-color);
    border-bottom: 1px solid var(--el-border-color);
    transition: background-color var(--el-transition-duration);
    .demo-svg-icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      cursor: pointer;
      &.active {
        background-color: #1655ad;
      }
    }
  }
}
.footerBar {
  text-align: center;
  margin-top: 30px;
}
</style>
